<!doctype html>
<html>
<head>
  {% block head %}
    <title>{% block title %}Home{% endblock %}</title>
    <link rel="stylesheet" href="static/css/home.css">
    <link
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
        rel="stylesheet">
    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="static/js/home.js"></script>
  {% endblock %}
</head>
<body>
<header>
  <nav class="navbar navbar-default navbar-static-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed"
                data-toggle="collapse" data-target="#navbar"
                aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Shell History</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="/">Home</a></li>
          <li><a href="/admin/history">Admin</a></li>
          <li><a href="#" id="sync-button">Sync data</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </nav>
</header>
<section id="content" class="container">
  <div id="sync" class="row">
    <div class="col-md-12">
      <div id="sync-alert" style="display:none;">
        <p id="sync-message" style="display:inline; white-space:pre-line;"></p>
        <a id="sync-close"><span aria-hidden="true">&times;</span></a>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-3">
      <ul class="list-unstyled">
        <!-- <li><a href="/">Home</a></li> -->
        <li><a href="/duration">Commands by duration</a></li>
        <li><a href="/length">Commands by length</a></li>
        <li><br></li>
        <li><a href="/codes">Commands by exit code</a></li>
        <li><a href="/type">Commands by type</a></li>
        <li><br></li>
        <li><a href="/daily">Daily commands</a></li>
        <li><a href="/daily_average">Daily commands (average)</a></li>
        <li><br></li>
        <li><a href="/hourly">Hourly commands</a></li>
        <li><a href="/hourly_average">Hourly commands (average)</a></li>
        <li><br></li>
        <li><a href="/monthly">Monthly commands</a></li>
        <li><a href="/monthly_average">Monthly commands (average)</a></li>
        <li><br></li>
        <li><a href="/yearly">Yearly commands</a></li>
        <li><a href="/over_time">Commands over time</a></li>
        <li><br></li>
        <li><a href="/markov">Markov chain</a></li>
        <li><a href="/markov_full">Markov chain (full commands)</a></li>
        <li><br></li>
        <li><a href="/top_commands">Top commands (first word only)</a></li>
        <li><a href="/top_commands_full">Top commands (full lines)</a></li>
        <li><br></li>
        <li><a href="/trending">Trending commands</a></li>
      </ul>
    </div>
    <div class="col-md-9">
      {% block content %}
        <h2 id="welcome-title">Welcome to Shell History :)</h2>
        <script
            src="https://code.highcharts.com/modules/wordcloud.js"></script>
        <script src="static/js/wordcloud.js"></script>
        <div id="container"
             style="min-width: 600px; height: 400px; margin: 0 auto"></div>
      {% endblock %}
    </div>
  </div>
  <hr>
</section>
<footer id="footer" class="container">
  <em>&copy; Copyright 2017-2019 by Timothée Mazzucotelli. Source code on <a href="https://github.com/pawamoy/shell-history">GitHub</a>.</em>
</footer>
</body>
</html>
